<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <el-col :span="14">
        <el-upload :on-success="selectPage"
                   :show-file-list="false"
                   :action="'/pmph/action/examOutline/uploadAndInsertFile?id='"
                   accept=".xlsx"
                   style="display: inline-block">
          <el-button size="small" type="success">导入大纲</el-button>
        </el-upload>
        <el-button size="small" style="margin-left: 10px; " type="success" @click="batchDelete">批量删除</el-button>
      </el-col>
      <el-col :span="10">
        <div>
          <div style="width: 430px; float: right">
            <el-input v-model="examOutline.name" placeholder="请输入大纲名称" @keyup.enter.native="advanceConfirm">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" v-on:click="switchAppend"></el-button>
            </el-input>
          </div>
          <div v-if="showAdvance" id="advance" style="padding: 10px;float: right">
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">适用专业</div>
              <div style="display: inline-block">
                <el-input v-model="examOutline.major" size="small" style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">单元数</div>
              <div style="display: inline-block">
                <el-input-number v-model="examOutline.unitNumStartIndex"
                                 :max="examOutline.unitNumEndIndex"
                                 :min="1"
                                 controls-position="right" size="small"
                                 style="width: 135px;"/>
                <span>至</span>
                <el-input-number v-model="examOutline.unitNumEndIndex"
                                 :min="examOutline.unitNumStartIndex"
                                 controls-position="right"
                                 size="small"
                                 style="width: 135px;"/>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">细目数</div>
              <div style="display: inline-block">
                <el-input-number v-model="examOutline.tagNumStartIndex"
                                 :max="examOutline.tagNumEndIndex"
                                 :min="1"
                                 controls-position="right" size="small"
                                 style="width: 135px;"/>
                <span>至</span>
                <el-input-number v-model="examOutline.tagNumEndIndex"
                                 :min="examOutline.tagNumStartIndex"
                                 controls-position="right"
                                 size="small"
                                 style="width: 135px;"/>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">要点数</div>
              <div style="display: inline-block">
                <el-input-number v-model="examOutline.detailNumStartIndex"
                                 :max="examOutline.detailNumEndIndex"
                                 :min="1"
                                 controls-position="right" size="small"
                                 style="width: 135px;"/>
                <span>至</span>
                <el-input-number v-model="examOutline.detailNumEndIndex"
                                 :min="examOutline.detailNumStartIndex"
                                 controls-position="right"
                                 size="small"
                                 style="width: 135px;"/>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">知识点数</div>
              <div style="display: inline-block">
                <el-input-number v-model="examOutline.knowledgeNumStartIndex"
                                 :max="examOutline.knowledgeNumEndIndex"
                                 :min="1"
                                 controls-position="right" size="small"
                                 style="width: 135px;"/>
                <span>至</span>
                <el-input-number v-model="examOutline.knowledgeNumEndIndex"
                                 :min="examOutline.knowledgeNumStartIndex"
                                 controls-position="right"
                                 size="small"
                                 style="width: 135px;"/>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">题数</div>
              <div style="display: inline-block">
                <el-input-number v-model="examOutline.exerciseNumStartIndex"
                                 :max="examOutline.exerciseNumEndIndex"
                                 :min="1"
                                 controls-position="right" size="small"
                                 style="width: 135px;"/>
                <span>至</span>
                <el-input-number v-model="examOutline.exerciseNumEndIndex"
                                 :min="examOutline.exerciseNumStartIndex"
                                 controls-position="right"
                                 size="small"
                                 style="width: 135px;"/>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">导入日期</div>
              <div style="display: inline-block">
                <el-date-picker v-model="examOutline.importDateRange" :picker-options="pickerOptions" align="right"
                                end-placeholder="截止日期"
                                range-separator="至" size="small"
                                start-placeholder="开始日期" style="width: 300px;" type="daterange"
                                unlink-panels value-format="yyyy-MM-dd">
                </el-date-picker>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">导入状态</div>
              <div style="display: inline-block">
                <el-select v-model="examOutline.importStatus" clearable
                           placeholder="请选择"
                           size="small"
                           style="width: 300px;">
                  <el-option
                    v-for="item in CONST.JOURNAL_STATUS"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">导入者</div>
              <div style="display: inline-block;">
                <el-select
                  v-model="examOutline.createdBy"
                  clearable
                  filterable
                  placeholder="请输入导入者"
                  size="small"
                  style="width: 300px;">
                  <el-option
                    v-for="item in $store.state.userList"
                    :key="item.userName"
                    :label="item.name"
                    :value="item.userName">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="6" :span="6">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="showAdvance = false">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="reset">重置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-row>
      <el-table :data="tableData" :height="tableHeight" border stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          align="center"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="大纲名称" min-width="160" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="适用专业" prop="major" show-overflow-tooltip width="160"></el-table-column>
        <el-table-column label="专业代码" prop="majorCode" width="80"></el-table-column>
        <el-table-column label="单元数" prop="unitNum" width="80"></el-table-column>
        <el-table-column label="细目数" prop="tagNum" width="80"></el-table-column>
        <el-table-column label="要点数" prop="detailNum" width="80"></el-table-column>
        <el-table-column label="知识点数" prop="knowledgeNum" width="80"></el-table-column>
        <el-table-column label="题数" prop="exerciseNum" width="80"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" label="导入状态" min-width="100" prop="importStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.importStatus === 0">导入中</span>
            <span v-if="scope.row.importStatus === 1" style="color: #EC0000">导入失败
              <el-popover :content="scope.row.failureReason" trigger="hover">
                <el-button slot="reference" type="text"><a style="color: #EC0000">详情</a> </el-button>
              </el-popover><i class="el-icon-warning-outline el-icon--right"></i>
              <el-upload :action="'/pmph/action/examOutline/uploadAndInsertFile?id=' + scope.row.id"
                         :on-success="selectPage"
                         :show-file-list="false"
                         style="display: inline-block">
                <el-link size="small" type="success">重新上传</el-link>
              </el-upload>
            </span>
            <span v-if="scope.row.importStatus === 2">导入成功</span>
          </template>
        </el-table-column>
        <el-table-column label="导入者" prop="createdBy" width="100">
          <template slot-scope="scope">
            <span v-html="$store.state.userList.find(user => user.userName === scope.row.createdBy).name"></span>
          </template>
        </el-table-column>
        <el-table-column label="导入日期" prop="createdTime"
                         width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.importStatus === 2">
              <el-link type="primary" @click.prevent="selectExamOutlineById(scope.row.id)">编辑</el-link></span>
            <span v-if="scope.row.importStatus === 2">
              <el-link type="primary" @click.prevent="selectById(scope.row.id)">查看</el-link></span>
            <span v-if="scope.row.importStatus !== 0">
              <el-link type="danger" @click.prevent="deleteById(scope.row.id)">删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :current-page.sync="examOutline.currentPage"
          :page-size.sync="examOutline.pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :total="totalNum"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"
          @current-change="selectPage"
          @size-change="selectPage"></el-pagination>
      </div>
    </el-row>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="编辑大纲"
      width="30%">
      <div style="margin-top: 20px; display: flex;">
        <div class="advancedSearchLabel">大纲名称<span style="color: red;">*</span></div>
        <div style="width: 340px">
          <el-input v-model="updateExamOutline.name"
                    maxlength="50"
                    placeholder="请输入大纲名称"
                    show-word-limit
                    type="text"></el-input>
        </div>
      </div>
      <div style="margin-top: 20px; display: flex;">
        <div class="advancedSearchLabel">适用专业<span style="color: red;">*</span></div>
        <div style="width: 340px">
          <el-input v-model="updateExamOutline.major"
                    maxlength="50"
                    placeholder="请输入适用专业"
                    show-word-limit
                    type="text"></el-input>
        </div>
      </div>
      <div style="margin-top: 20px; display: flex;">
        <div class="advancedSearchLabel">专业代码<span style="color: red;">*</span></div>
        <div style="width: 340px">
          <el-input v-model="updateExamOutline.majorCode"
                    maxlength="50"
                    placeholder="请输入专业代码"
                    show-word-limit
                    type="text"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateById">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      tableHeight: 0,
      tableData: [],
      totalNum: 0,
      multipleSelection: [],
      failureReason: '',
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      examOutline: {
        currentPage: 1, // 第几页
        pageSize: 10, // 每页显示的数据个数
      },
      updateExamOutline: {},
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  methods: {
    reset() {
      this.examOutline = {
        currentPage: 1, // 第几页
        pageSize: 10, // 每页显示的数据个数
      }
    },
    advanceConfirm: function () {
      this.showAdvance = false;
      this.examOutline.currentPage = 1;
      this.selectPage();
    },
    //复选框选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectPage() {
      this.axios.get('/pmph/action/examOutline/selectPage', {
        params: this.examOutline
      }).then((response) => {
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
        if (this.tableData.find(item => item.importStatus === 0)) {
          this.timer = setTimeout(this.selectPage, 3000);
        }
        this.showAdvance = false
      })
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    deleteById(id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/examOutline/deleteById', {
          params: {
            id: id
          }
        }).then(() => {
          this.examOutline.currentPage = 1
          this.selectPage()
        })
      })
    },
    batchDelete() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning("请选择待删除的大纲");
        return;
      }
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get('/pmph/action/examOutline/deleteById', {
          params: {
            id: UTIL.arrayToStr(this.multipleSelection, 'id', ',')
          }
        }).then(() => {
          this.examOutline.currentPage = 1
          this.selectPage()
        })
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => {
        done();
      }).catch(_ => {
      });
    },
    selectExamOutlineById(id) {
      this.axios.get('/pmph/action/examOutline/selectExamOutlineById', {
        params: {
          id: id
        }
      }).then((response) => {
        this.updateExamOutline = response.data;
        this.dialogVisible = true;
      })
    },
    updateById() {
      if (UTIL.isEmpty(this.updateExamOutline.name)) {
        this.$message.warning('大纲名称不能为空');
        return;
      }
      if (UTIL.isEmpty(this.updateExamOutline.major)) {
        this.$message.warning('适用专业不能为空');
        return;
      }
      if (UTIL.isEmpty(this.updateExamOutline.majorCode)) {
        this.$message.warning('专业代码不能为空');
        return;
      }
      this.axios.post('/pmph/action/examOutline/updateById', this.updateExamOutline).then(() => {
        this.selectPage();
        this.dialogVisible = false;
      });
    },
    selectById(id) {
      this.$router.push({
          path: '/examOutline/Detail',
          query: {id: id}
        }
      )
    },
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.selectPage();
  },
  beforeRouteLeave(to, from, next) {
    //跳转到搜索页面时，search为搜索页面名称
    if (to.name == 'detail') {
      to.meta.isUseCache = false;
    }
    next();
  }
}
</script>

<style scoped>

</style>
